<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>核对订单信息 - 江宁义务网上商城 - 网购首选 - 正品低价、品质保障、货到付款、配送及时、放心服务、轻松购物！</title>
<meta name="description" content="义务商城-专业的综合网上购物商城，在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等数万个品牌千万种优质商品。便捷、诚信的服务，为您提供愉悦的网上商城购物体验! ">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东商城">
<jsp:include page="../common/include.jsp"></jsp:include>
<!-- mobile setting -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="<c:url value="/scripts/jquery-1.7.2.min.js"/>"></script>
<style type="text/css"> 
       table.cart-tb{border-collapse:collapse;border:none;border:solid rgb(204, 204, 204) 1px;}
       table.cart-tb th,table.cart-tb td{border:solid rgb(204, 204, 204);border-width:0 0 1px 0;}
       table.cart-tb th{height: 35px;background-color:  rgb(245, 245, 245);line-height: 35px;text-align: center;}
       table.cart-tb td{height: 60px;line-height: 50px;text-align: center;padding: 8px 0;}
       table.cart-tb .las{border-right-width:1px;}
       table.cart-tb td.pname{text-align: left;}
       div.pimg{width: 55px;height:55px;padding: 1px;border: 1px solid #ccc;float: left;margin: 0 10px;}
       div.pimg img{display: block;width: 55px;height:55px;}
   	   table.cart-tb td.allp{font-size: 16px;font-weight: bold;text-align: right;padding: 0 20px;height: 50px;line-height: 50px;}
table.cart-tb td a{text-decoration: none;color:#544f4b;}
table.cart-tb td a:HOVER{text-decoration: underline;color:#EF5A1F;}
.cart-button{padding: 20px 10px;}
.cart-button a{height: 35px;width:120px;line-height:35px; border:1px solid rgb(204, 204, 204);display: block;background-color: rgb(245, 245, 245);text-decoration: none;color: #544F4B;text-align: center;font-size: 16px;font-weight: bold;}
.cart-button a.continue{float: left;font-size: 14px;}
.cart-button a.checkout{float: right;color:#fff;background-color: #EF5A1F;border-color: #fff;}
.cart-button a:HOVER {color:#fff;background-color: #f38256;border-color: #fff;}
.cart_box_{padding: 5px;background: #ccc;margin-bottom: 50px;}
.cart_box{background: #fff;width:970px;padding-bottom: 20px;}

.h_progress .p_one_t{background-color:#f38256; }
.h_progress .p_one_n{color:#f38256;}
table.cart-tb th.sec-tit{text-align: left;font-size: 18px;padding: 0 20px;}
table.cart-tb th.sec-tit span{color:#ef5a1f;font-size: 13px;}
table.cart-tb td.sec-add{text-align: left;padding: 10px 20px 20px 20px;line-height: 30px;}
table.cart-tb th.sec-apply{text-align: left;line-height: 25px;padding: 10px 20px 20px 20px;line-height: 30px;}
h2.sec-h2{margin: 0;padding: 0;color:#EF5A1F;font-family: "microsoft yahei";}
th.sec-apply textarea{width: 800px;height: 70px;}

div.addr_tab{width: 470px;border:5px solid #dedede;padding: 10px 20px;display:none;}
div.addr_tab table tr td{height: 25px;line-height: 25px; border-width:0; padding:3px 0;}
div.addr_tab table tr td input[type="text"]{width: 250px;}
div.addr_tab table tr td input[type="button"]{color:#fff; font-size:14px; font-weight:bold; padding:5px 15px; background:#EF5A1F; border:0px; line-height:100%; cursor:pointer;}
div.addr_tab table tr td input[type="button"]:HOVER {background-color: #f38256;}

div.addrList > div > b{font-size: 14px;}
</style> 
<script>
    //点击提交订单按钮
    function commitOrder(){
    	var address = jQuery.trim($("input[name='address']:checked").attr("value"));
    	if(address == ""){
    		alert("亲，请添加或者选择收获地址");
    		return;
    	}
    	document.myform.submit();
    }
    
    //点击新增地址连接,显示添加地址的层
    function showNewAddressDiv(){
    	if(10 <= $("#addrLength").val()){
    		alert("最多添加十个地址，请先删除不需要的地址！");
    		return;
    	}
    	$("div.addr_tab").slideToggle("slow");
    }
    
    //删除一个地址
    function delAddress(adcode){
    	if(!confirm("确定删除？")){
    		return false;
    	}
	    $.ajax({
	 		url : "<c:url value='/ordc/delAddress'/>",
	 		type : "post",
	 		data:"adcode="+adcode,
	 		dataType:"json",
	 		success : function(data) {
	 			var bool = data.message;
	 			if(bool=="true"){
	 				$("input[name='address'][value='"+adcode+"']").parent().css("display","none");
	 				$("input[name='address']:first").attr("checked","checked");
	 				var addrLength = parseInt($("#addrLength").val())-1;
	 				$("#addrLength").attr("value",addrLength);
	 				return 1;
	 			}else{
	 				alert("删除地址失败");
	 				return 0;
	 			}
	 		}
	 	});
    }
    
    //增加新的地址
    function addNewAddress(){
    	var name = jQuery.trim($("input[name='shrname']").val());
    	var addr = jQuery.trim($("input[name='addr']").val());
    	var tel = jQuery.trim($("input[name='tel']").val());
    	var gdtel = jQuery.trim($("input[name='gdtel']").val());
    	var email = jQuery.trim($("input[name='email']").val());
    	var youbian = jQuery.trim($("input[name='youbian']").val());
    	var flag = 0;
    	if(name==""){
    		$("input[name='shrname']").parent().next().text("请输入收货人姓名");
    		flag++;
    	}else{
    		$("input[name='shrname']").parent().next().html("&nbsp;");
    	}
    	
    	if(addr==""){
    		$("input[name='addr']").parent().next().text("请输入详细地址");
    		flag++;
    	}else{
    		$("input[name='addr']").parent().next().html("&nbsp;");
    	}
    	
    	if(tel==""){
    		$("input[name='tel']").parent().next().text("请输入收货人手机号码");
    		flag++;
    	}else{
    		var regu = "^\\d{11}$";
    		var re = new RegExp(regu);
    		if(!re.test(tel)){
    			$("input[name='tel']").parent().next().text("手机号码格式错误");
    			flag++;
    		}else{
    			$("input[name='tel']").parent().next().html("&nbsp;");
    		}
    	}
    	
    	if(gdtel==""){
    		$("input[name='gdtel']").parent().next().html("&nbsp;");
    	}else{
    		var regu = "^((\\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1})|(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1}))$";
    		var re = new RegExp(regu);
    		if(!re.test(gdtel)){
    			$("input[name='gdtel']").parent().next().text("固定电话格式错误");
    			flag++;
    		}else{
    			$("input[name='gdtel']").parent().next().html("&nbsp;");
    		}
    	}
    	
    	if(email==""){
    		$("input[name='email']").parent().next().text("请输入用户邮箱");
    		flag++;
    	}else{
    		var regu = "^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])";
    		var re = new RegExp(regu);
    		if(!re.test(email)){
    			$("input[name='email']").parent().next().text("邮箱格式输入错误");
    			flag++;
    		}else{
    			$("input[name='email']").parent().next().html("&nbsp;");
    		}
    	}
    	
    	if(youbian == ""){
    		$("input[name='youbian']").parent().next().html("&nbsp;");
    	}else{
    		var regu = "^[1-9][0-9]{5}$";
    		var re = new RegExp(regu);
    		if(!re.test(youbian)){
    			$("input[name='youbian']").parent().next().text("邮编格式错误");
    			flag++;
    		}else{
    			$("input[name='youbian']").parent().next().html("&nbsp;");
    		}
    	}
    	
    	if(flag != 0){
    		return;
    	}
    	
	    $.ajax({
	 		url : "<c:url value='/ordc/addNewAddress'/>",
	 		type : "post",
	 		data:"shrname="+name+"&addr="+addr+"&tel="+tel+"&gdtel="+gdtel+"&email="+email+"&youbian="+youbian,
	 		dataType:"json",
	 		success : function(data) {
	 			var bool = data.message;
	 			if(bool!="false"){
	 				var addrLength = parseInt($("#addrLength").val())+1;
	 				$("#addrLength").attr("value",addrLength);
	 				var html = '<div class="">'+
				        '<input type="radio" name="address" checked="checked" value="'+data.message+'">&ensp; 详细地址'+addrLength+': <b>'+addr+'</b>&ensp;&ensp;收货人：<b>'+name+'</b>&ensp;&ensp;联系电话：<b>'+tel+'</b>'+
				        '&ensp;&ensp;<a href="javascript:void(0);" onclick="delAddress(\''+data.message+'\');" style="color:#ef5a1f">删除</a>'+
				        '</div>';
				    $("#addrList").append(html);
				    if($("div.addr_tab").css("display")=="block"){
				    	$("div.addr_tab").slideToggle("slow");
				    }
	 				return 1;
	 			}else{
	 				alert("新增地址失败");
	 				return 0;
	 			}
	 		}
	 	});
    }
</script>
</head>

<body>
<div class="wrapper">
    <div class="header_container">
        <!--Header Starts-->
        <header><div class="header">
            <div class="top_bar clear">
                <!--Language Switcher Starts-->
               <div class="language_switch"> Hi. 蜗牛2. </div>
				<div class="language_switch head-right"> 您好,&nbsp;
					<c:if test="${user != null }">${uname} &nbsp; [<a href="<c:url value="/urc/center"/>">用户中心</a>]&nbsp;|&nbsp;[<a href="<c:url value="/urc/lgnout"/>">退出</a>]</c:if>
					<c:if test="${user == null }"> 欢迎蜗牛商城 ! &nbsp;[<a href="<c:url value="/urc/lgnpage"/>">登录</a>]&nbsp; [<a href="<c:url value="/urc/regpage"/>">免费注册</a>]
					</c:if>
					 &nbsp;|&nbsp; <a class="nav" href="<c:url value="/ordc/myorder"/>">我的订单</a>&nbsp;|&nbsp; <a class="nav" href="#">客户服务</a></div>
                <!--Top Links Ends-->
            </div>
            <!--Logo Starts-->
            <h1 class="logo"> <a href="<c:url value="/wlc"/>"><img src="<c:url value="/images/logo.png"/> " /></a></h1>
            <!--Logo Ends-->
            <!--Search Starts-->
            	<div class="header_login"> | 核对订单信息</div>
            	<div class="h_progress">
            		<table>
            			<tr><th class="p_one_t">①</th><th class="p_one_t">② </th><th>③</th></tr>
            			<tr><td class="p_one_n">1.我的购物车</td><td class="p_one_n">2.核对订单信息</td><td>3.成功提交订单</td></tr>
            		</table>
            	</div>
            <!--Search Ends-->
        </div></header>
        <!--Header Ends-->
    </div>
    <div class="navigation_container">
        <!--Navigation Starts-->
        <!--Navigation Ends-->
    </div>
    <form name="myform" action="<c:url value="/crtc/order"/>">
    <input type="hidden" value="${sumprice}" name="sumprice"/>
    <input type="hidden" value="${pcodes}" name="pcodes"/>
    <div class="section_container">
        <!--Mid Section Starts-->
        <section><div class="section">
        	<div class="cart_box_">
        	<div class="cart_box">
        		<table class="cart-tb">
        			<tr>
        				<th colspan="10" class="sec-tit">核对订单信息 ( <span>送货地址、商品清单、支付方式</span> )</th>
        			</tr>
        			<tr>
        				<td colspan="10" class="sec-add">
        				<h2 class="sec-h2">选择收获地址：<span><a href="javascript:void(0);" onclick="showNewAddressDiv()">[添加新地址]</a><input type="hidden" value="${addsize}" id="addrLength"/></span></h2>
        				<div class="addr_tab">
        					<table>
					            <tr><td class="td_r">收货人<font color="red">*</font>：</td><td><input type="text" value="" name="shrname"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
					            <tr><td class="td_r">详细地址<font color="red">*</font>：</td><td><input type="text" value="" name="addr"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
					            <tr><td class="td_r">手机号码<font color="red">*</font>：</td><td><input type="text" value="" name="tel"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
					            <tr><td class="td_r">固定电话<font color="red">&nbsp;</font>：</td><td><input type="text" value="" name="gdtel"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
					            <tr><td class="td_r">电子邮件<font color="red">*</font>：</td><td><input type="text" value="" name="email"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
					            <tr><td class="td_r">邮政编码<font color="red">&nbsp;</font>：</td><td><input type="text" value="" name="youbian"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
					            <tr><td colspan="2" class="but_sub"><input type="button" value="增加" onclick="addNewAddress()"/></td><td></td></tr>
					        </table>
        				</div>
        				<div id="addrList">
        				<c:forEach items="${addresses}" var="address" varStatus="status">
        				    <div class="">
        				        <input type="radio" name="address" <c:if test="${status.count==1}">checked="checked"</c:if> value="${address.adcode}"> 
        				        		&ensp;详细地址${status.count}: <b>${address.addr}</b>
        				        		&ensp;&ensp;收货人：<b>${address.name}</b>
        				        		&ensp;&ensp;联系电话：<b>${address.tel}</b>
        				        		&ensp;&ensp;<a href="javascript:void(0);" onclick="delAddress(${address.adcode});" style="color:#ef5a1f">删除</a>
        				    </div>
        				</c:forEach>
        				</div>
        				</td>
        			</tr>
        			<tr>
        				<th width="150px">商品编号</th>
        				<th width="420px">商品名称</th>
        				<th width="100px">会员价</th>
        				<th width="100px">积分</th>
        				<th width="100px">数量</th>
        				<th width="100px" class="las">状态</th>
        			</tr>
        			<c:forEach items="${precords}" var="record">
        			<tr>
        			<td>${record.pcode}</td>
        			<td class="pname" >
        			<div class="pimg">
        				<a href="<c:url value="/wlc/gpro?pcode=${record.pcode}"/>" target="_blank"><img src="<c:url value="${record.pphoto}"/>"></a>
        			</div>
        			<a href="<c:url value="/wlc/gpro?pcode=${record.pcode}"/>" target="_blank">${record.pname}</a>
        			</td>
        			<td>￥${record.phyprice}</td>
        			<td>${record.khjf*record.pnum}</td>
        			<td>${record.pnum}</td>
        			<td class="las">现货</td>
        			</tr>
        			</c:forEach>
        			<tr>
        				<th colspan="10" class="sec-apply">
        				<h2 class="sec-h2">选择支付方式：</h2>
        				    <c:forEach items="${zhifus}" var="zhifu" varStatus="status">
        				        <div class="">
        				           <input type="radio" name="zhifu" value="${zhifu.zcode}" <c:if test="${status.count==1}">checked="checked"</c:if> />
        				              ${zhifu.zname} &nbsp;${zhifu.zsm}</div>
        				    </c:forEach>
						</th>
        			</tr>
        			<tr>
        				<th colspan="10" class="sec-apply">
        				<h2 class="sec-h2">送货说明：</h2>
        					<div class="">（配送地址详情、配送时间等）</div>
       				        <div class="">
       				        <textarea name="descp"></textarea>   
       				        </div>
						</th>
        			</tr>
        			<tr>
						<td colspan="10" class="las allp">应付金额：<font color="#ef5a1f"> ￥${sumprice}</font></td>
					</tr>
        		</table>
        		<div class="cart-button"> 
        			<!-- <a href="#" class="continue"><span>&lt; 返回修改购物车</span></a> -->
        			<a href="javascript:void(0);" onclick="commitOrder();" class="checkout"><span>提交订单 </span></a>
        		</div>
        		<div style="clear: both;" >&nbsp;</div>
        	</div></div>
        	<p>&nbsp;</p>
        </div></section>
        <!--Mid Section Ends-->
    </div>
    </form>
    <div class="footer_container">
        <!--Footer Starts-->
            <address>
            	<ul><li><a href="#">关于我们</a></li>
            		<li><a href="#">联系我们</a></li>
            		<li><a href="#">人才招聘</a></li>
            		<li><a href="#">商家入驻</a></li>
            		<li><a href="#">广告服务</a></li>
            		<li>免责条款 © 2012-2014 ***  版权所有，并保留所有权利。 </li>
   				</ul>
            </address>
        <!--Footer Ends-->
    </div>
</div>
</body>
</html>